<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="browsermode" content="application" />
    <meta name="x5-page-mode" content="app" />
    <title>设置交易密码</title>
    <meta charset="utf-8" />
    <link href="../css/main.css?rev=@@hash" rel="stylesheet" />
    <style>
        body{
            width: 3.75rem;
            /*height: 6rem;*/
            position: relative;
            background-color: white;
        }
        .cells {
            padding-top: .1rem;
        }
        .cells_title {
            margin: 0;
            padding: .12rem .4rem;
            font-size: .16rem;
            height: .22rem;
            color: rgb(68,74,89);
        }
        .cells_title a {
            display: block;
            float: left;
            font-size: .16rem;
            height: .22rem;
            font-weight: 700;
        }
        .cells_title span {
            display: block;
            float: left;
            font-size: .13rem;
            height: .22rem;
            line-height: .22rem;
            margin-left: .2rem;
            color: rgb(136,136,136)
        }

        .operatorContent {
            width: 100%;
            /*background: #f9f9f9;*/
            overflow: hidden;
            position: absolute;
            bottom: 0.2rem;
        }
        .txt {
			text-align: left;
        }

        .getCode {
            color: red;
            font-size: .12rem;
        }
        .cell_ft img {
            display: block;;
            width: 1rem;
            height: .3rem;
        }
        .tip {
            line-height: .2rem;
            height: .2rem;
            overflow: hidden;
            margin: .2rem .4rem;
        }
        .tip span{
            display: block;
            float: left;
            font-size: .12rem;
            line-height: .2rem;
            height: .2rem;
        }
        .tip i {
            display: block;
            width: .12rem;
            height: .12rem;
            margin: 0.02rem .04rem;
            float: left;
        }
        .tip i img {
            width: 100%;
        }
        .cells_tips {
            margin: 0rem .4rem;
            border-top: solid .01rem #eee;
            font-size: .12rem;
            height: .4rem;
            line-height: .4rem;
        }

        .confirmBtn {
            position: absolute;
            bottom: .5rem;
        }
        .submitBtn {
            position: static;
            margin: 0 auto;
            font-size: .18rem;
        }
        .cells_line {
            height: .1rem;
            width: 100%;
        }

        select {
            border: 0;
            float: right;
            width: 1.2rem;
            height: .2rem; 
            appearance:none;  
            -moz-appearance:none;  
            -webkit-appearance:none;  
            background: url("../images/gogogo.png") ;
            background-repeat: no-repeat;
            background-size: 20% 100%;
            background-position: 100% 0%;
            /*为下拉小箭头留出一点位置，避免被文字覆盖*/ 

            padding: 0 .14rem;
            font-size: .16rem;
        }
        select::-ms-expand { display: none; }
        select option {
            width: 1.2rem;
            height: .2rem; 
            font-size: .14rem;
            background-color: white;
        }
        .cell_cn img {
            position: absolute;
            top: .12rem;
            right: .4rem;
            width: .2rem;
            height: .2rem;
        }
        .cell_cn {
            text-align: right;
        }
        .smsCell input{
            width: 70%;
        }
        .cell_ft_btn {
            color: red;
            background-color: white;
        }

    </style>
</head>
<body>
    <!-- 蒙版 -->
    <div class="layer_load">
        <div class="layer_mask"></div>
        <div class="layer_load_icon icon-loading"></div>
    </div>
	<div class="cells">
        <div class="cell">
            <label class="cell_hd">您的手机号：</label>
            <div class="cell_cn">
                
            </div>
        </div>
        <div class="cell">
            <div class="cell_cn">
                <input type="text" class="txt" placeholder="请输入身份证号码" id="idCard" maxlength="18" />
            </div>
        </div>
        <div class="cell">
            <div class="cell_cn">
                <input type="password" class="txt" placeholder="请输入新密码" id="newPassword" maxlength="6" />
            </div>
        </div>
        <div class="cell smsCell">
            <input type="text" placeholder="图形验证码" class="txt" id="txtImgCode" maxlength="4"/>
            <input type="hidden" id="hdImgCodeID" value="" />
            <div class="cell_ft">
                <img src="" id="btnImgCode"/>
            </div>
        </div>        
        <div class="cell smsCell">
            <input type="text" placeholder="短信验证码" maxlength="6" class="txt" id="txtCode" />
            <input type="hidden" id="hdCodeID" />
            <div class="cell_ft">
                <a href="javascript:;" class="cell_ft_btn" id="btnCode">获取验证码</a>
            </div>
        </div>
	</div>

    <div class="operatorContent confirmBtn">
        <div class="submitBtn">
            确   定
        </div>

    </div>

    <!-- 脚本 -->
    <script src="../lib/zepto.min.js?rev=@@hash"></script>
    <script src="../js/main.js?rev=@@hash"></script>
    <script>
        (function(global,userUtil,layer){       
        	$("body").height(document.documentElement.clientHeight);
                var sessionId=userUtil.sid();
                var userUuid=userUtil.userID();
                var mobileNumber=localStorage.getItem("mobile");
                $(".cell_cn").eq(0).text(mobileNumber)
              // 图形验证码
              function changeImgCode() {
                  if ($("#btnImgCode").hasClass("dis")) {
                      return;
                  }
                  $("#btnImgCode").addClass("dis");
                  userUtil.ajax({
                      url: global.localUrl + "wallet/user/randomImage",
                      data: {
                          ss: new Date().getMilliseconds()
                      },
                      done:function(re){
                          $("#btnImgCode").removeClass("dis");
                          if (1 == re.code) {
                              $("#hdImgCodeID").val(re.data.imgSessionId);
                              $("#btnImgCode").attr("src", "data:image/jpeg;base64," + re.data.imgBase64);
                          }
                      }
                  });
              }
              $("#btnImgCode").on("click", function () {
                  changeImgCode();
              });
              changeImgCode();

                //  验证码
                $("#btnCode").on("click", function () {
                    var $this = $(this);
                    if (!$this.hasClass("dis")) {
                        $this.addClass("dis");
                        var _model = getModel();
                        var _data = {
                            mobileNumber: mobileNumber,
                            inCode: _model.inCode,
                            imgSessionId: _model.imgSessionId,
                            smsType:"PAYPASSWORD",
                            ss: new Date().getMilliseconds(),
                            "sessionId": sessionId,
                            "iDCardNo": $("#idCard").val()
                        };
                        $.ajax({
                            url: global.localUrl + "wallet/system/smsCode",
                            type: "post",
                            data: JSON.stringify(_data),
                            contentType: 'application/json;charset=utf-8',
                            success: function (re) {
                                if (1 == re.code) {
                                    showWaitTips();
                                }
                                else{
                                    changeImgCode();
                                    $("#txtImgCode").val("");
                                    $this.removeClass("dis");
                                    layer.tips(re.message);
                                }
                            },
                            error: function () {
                                $this.removeClass("dis");
                                layer.tips(global.netError);
                            }
                        });
                    }
                });
                
                // 验证码倒计时
                function showWaitTips() {
                    var $btnCode = $("#btnCode");
                    var s = 60;
                    $btnCode.text("已发送(" + s + ")").addClass("dis");
                    var sv = setInterval(function () {
                        if (s > 1) {
                            s--;
                            $btnCode.text("已发送(" + s + ")");
                        } else {
                            $btnCode.text("重新获取").removeClass("dis");
                            clearInterval(sv);
                        }
                    }, 1000);
                }
                  function getModel() {
                      return {
                          mobileNumber: $.trim($("#txtMobile").val()),
                          inCode: $.trim($("#txtImgCode").val()),
                          imgSessionId: $.trim($("#hdImgCodeID").val()),
                          smsCode: $.trim($("#txtCode").val()),
                          code: $.trim($("#txtCode").val()),
                      }
                  }
                  function validateMobile() {
                    var _model = getModel();
                    if (!dataUtil.isMobile(_model.mobileNumber)) {
                        layer.tips("请输入正确的手机号");
                        return false;
                    } 
                    return true;
                  }
                  function validateCode() {
                      var _model = getModel();
                      if (!_model.code) {
                          layer.tips("请输入短信验证码");
                          return false;
                      }
                      return true;
                  }
                  function validateImgCode() {
                      var _model = getModel();
                      if (!_model.imgSessionId) {
                          layer.tips("请刷新图形验证码");
                          return false;
                      } else if (!_model.inCode) {
                          layer.tips("请输入图形验证码");
                          return false;
                      }
                      return true;
                  }
                //提交
                $(".submitBtn").click(function(){
                    if(!$.trim($("#txtCode").val())||!$("#newPassword").val()){
                        layer.tips("请输入短信验证码或新密码");
                        return;
                    }
                    var reg = /^\d{6}\b/;

                    if(!reg.test($("#newPassword").val())){
                        layer.tips("请输入6位新交易密码");
                        $("#newPassword").val("");
                        return;
                    }
                    var _data={
                        "userUuid": userUuid,
                         "sessionId": sessionId,
                         "smsCode": $.trim($("#txtCode").val()),
                         "smsType":"PAYPASSWORD",
                         "payPassword": $("#newPassword").val(),
                         
                    }

                     $.ajax({
                        url: global.localUrl + "wallet/user/resetPayPassword",
                        type: "post",
                        data: JSON.stringify(_data),
                        contentType: 'application/json;charset=utf-8',
                        success: function (re) {
                            if (1 == re.code) {
                                layer.tips("重置成功");
                                setTimeout(function(){
                                    window.location.href=global.localUrl+'index.html';
                                }, 2000);

                            }else{
                                layer.tips(re.message);
                                setTimeout(function(){
                                    window.location.reload();
                                }, 2000);
                            }
                        },
                        error: function () {
                            // layer.tips(global.netError);
                        }
                    });
                })


        })(global,userUtil,layer)
    </script>
</body>
</html>